import React, { useEffect, useState } from 'react'
import { Modal, Form, Input } from 'antd'
import { useTranslation } from 'react-i18next'
import { addConfig } from '@/api/config'
import Toast from '@/utils/Toast'

const Index = ({ show = false, onCancel, onOk }) => {
  const { t } = useTranslation()
  const [form] = Form.useForm()
  const [currentShow, setCurrentShow] = useState(false)
  const initForm = {
    car_type: ''
  }
  const handleCancel = () => {
    form.resetFields()
    setCurrentShow(false)
    onCancel?.()
  }
  const handleOk = async () => {
    await form.validateFields()
    const val = form.getFieldValue().car_type.trim()
    const params = {
      typeFlag: 'car_type',
      label: val,
      value: val
    }
    await addConfig(params)
    Toast.success(t('addSuccess'))
    handleCancel()
    onOk?.()
  }
  useEffect(() => setCurrentShow(show), [show])
  return <Modal cancelText={t('cancel')} okText={t('save')} onOk={handleOk} className='web-modal' open={currentShow} title={t('car.addType')} onCancel={handleCancel}>
     <Form
      form={form}
      className='web-modal-form'
      labelCol={{span: 5}}
      wrapperCol={{span: 12}}
      initialValues={initForm}
      layout="horizontal"
      colon={false}
    >
      <Form.Item name='car_type' label={t('car.carType')} rules={[{ required: true, message: t('inputCarType2') }, { message: t('cannotSpace'), pattern: /^[^\s]*$/ }]}>
        <Input placeholder={t('inputCarType2')}/>
      </Form.Item>
    </Form>
</Modal>
}

export default Index
